<style lang="less">
  .icon-search {
    position: relative;
    margin: 20px auto 30px;
    text-align: center;
    input {
      width: 500px;
      box-sizing: border-box;
      border: 0;
      border-radius: 4px;
      background: #f5f5f5;
      text-align: center;
      font-size: 14px;
      outline: none;
      margin: 0 auto;
      padding: 8px 0;
    }
  }
  .icon-block {
    display: flex;
    flex-wrap: wrap;
    max-height: 500px;
    overflow: auto;
  }
  .icon-bar {
    overflow: auto;
    overflow-x: hidden;
  }
  .icon-bar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .icon-bar::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #c3c3c3;
  }

  .icon-bar::-webkit-scrollbar-track {
    background: #fff;
  }
  .icon-wrap {
    :hover {
      color: #1890ff;
      transition: color 0.3s;
    }
  }
  .icons-item {
    margin: 6px 6px 6px 0;
    width: 145px;
    text-align: center;
    list-style: none;
    cursor: pointer;
    height: 100px;
    color: #5c6b77;
    transition: all 0.2s ease;
    position: relative;
    padding-top: 10px;
    p {
      padding-top: 15px;
      margin: 5px;
      font-size: 14px;
    }
  }
</style>

<template>
  <div>
    <div style="display:flex">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :icon="currentValue"
      />
      <Button
        @click="iconModalVisible=true"
        :size="size"
        :disabled="disabled"
        :icon="icon"
        class="margin-left-10"
      >选择图标</Button>
    </div>

    <Modal
      title="选择图标"
      v-model="iconModalVisible"
      :width="950"
      :styles="{top: '30px'}"
      footer-hide
      :z-index="1060"
    >
      <div class="icon-search">
        <input
          type="text"
          v-model="key"
          :placeholder="tip"
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
        >
      </div>
      <div class="icon-block icon-bar">
        <div class="icon-wrap" v-for="(item, i) in iconData" :key="i" @click="hanleChoose(item)">
          <div class="icons-item">
            <Icon :type="item" style="font-size: 32px;"/>
            <p>{{item}}</p>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { icons } from '@/libs/icons'
export default {
  name: 'IconChoose',
  props: {
    value: {
      type: String,
      default: ''
    },
    size: String,
    placeholder: {
      type: String,
      default: '输入图标名或选择图标'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: Number,
    icon: {
      type: String,
      default: 'md-ionic'
    }
  },
  data () {
    return {
      iconModalVisible: false,
      currentValue: this.value,
      iconData: [],
      key: '',
      tip: '输入英文关键词搜索，比如 success'
    }
  },
  methods: {
    init () {
      let re = []
      icons.forEach(e => {
        e.icons.forEach(item => {
          re.push(item)
        })
      })
      this.iconData = re
    },
    handleInput () {
      if (this.key) {
        // 搜索
        let re = []
        icons.forEach(e => {
          e.tags.forEach(item => {
            if (item.indexOf(this.key) >= 0) {
              e.icons.forEach(r => {
                re.push(r)
              })
            }
          })
        })
        this.iconData = re
      } else {
        this.init()
      }
    },
    handleFocus () {
      if (!this.key) {
        this.tip = ''
      }
    },
    handleBlur () {
      if (!this.key) {
        this.tip = '输入英文关键词搜索，比如 success'
      }
    },
    handleChange (v) {
      this.$emit('input', this.currentValue)
      this.$emit('on-change', this.currentValue)
    },
    setCurrentValue (value) {
      if (value === this.currentValue) {
        return
      }
      this.currentValue = value
    },
    hanleChoose (v) {
      this.currentValue = v
      this.$emit('input', this.currentValue)
      this.$emit('on-change', this.currentValue)
      this.iconModalVisible = false
    }
  },
  watch: {
    value (val) {
      this.setCurrentValue(val)
    }
  },
  created () {
    this.init()
  }
}
</script>
